<div id="tab">
    <ul style="margin-left: 30px;">
        <li class=""><span>Thông tin cơ bản<span></li>
        <li>Đặc điểm nổi bật-Điều kiện mua</li>
        <li>Nội dung</li>
        <li>Album - images</li>
    </ul>
    <div class="tab-thong-tin-co-ban ">
        <input type="hidden" name="txtID" id="txtID" value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["ProductID"]}}{{/if}}"/>
        <table class="w720px ml8">
            <tr>
                <td class="w100px  tar red">Tên sản phẩm</td>
                <td colspan="3">
                    <div class="pr10">
                        <input id="txtName" name="txtName" type="text"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["ProductName"]|escape:'html'}}{{/if}}"
                                onblur="getAliasTo('#txtName','#txtAlias')"
                                />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100px tar red">Alias</td>
                <td colspan="3">
                    <div class="pr10">
                        <input id="txtAlias" name="txtAlias" type="text"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["Alias"]}}{{/if}}"
                                />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100px tar red">Tiêu đề</td>
                <td colspan="3">
                    <div class="pr10">
                        <input id="txtTitle" name="txtTitle" type="text"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["ProductTitle"]|escape:'html'}}{{/if}}"
                                />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100px tar red">Hình ảnh</td>
                <td colspan="3">
                    <div class="pr10 pr">
                        <input id="txtImage" name="txtImage" type="text"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["Image"]|escape:'html'}}{{/if}}"
                                />
                        <div class="pa hover50 icon16 chooseimage chooseimage_icon"
                                onclick="BrowseServer('txtImage' );"
                                title="Chọn hình ảnh"
                                ></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100px tar red">Danh mục</td>
                <td colspan="3">
                    <div class="pr2">
                        <div id="cbxCategorys"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100px tar  red">Khu vực</td>
                <td colspan="3">
                    <div class="pr2">
                        <div id="cbxRegions"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100pxtar tar red">Nhà cung cấp</td>
                <td>
                    
                    <div class="pr10">
                        <input id="txtSupplier" name="txtSupplier" type="text"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["Supplier"]|escape:'html'}}{{/if}}"
                                />
                    </div>
                </td>
                <td class="w100px tar  red">Đơn vị</td>
                <td>
                    <div class="pr10">
                        <input id="txtQuantityPerUnit" name="txtQuantityPerUnit" type="text"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["QuantityPerUnit"]|escape:'html'}}{{/if}}"
                                />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100pxtar tar red">Số lượng</td>
                <td>
                    
                    <div class="pr10">
                        <input id="txtAmount" name="txtAmount" type="number"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["Amount"]|escape:'html'}}{{/if}}"
                                />
                    </div>
                </td>
                <td class="w100px tar  red">Đã bán</td>
                <td>
                    <div class="pr10">
                        <input id="txtSold" name="txtSold" type="number"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["Sold"]|escape:'html'}}{{/if}}"
                                />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100pxtar tar red">Giá</td>
                <td>
                    
                    <div class="pr10">
                        <input id="txtUnitPrice" name="txtUnitPrice" type="number"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["UnitPrice"]|escape:'html'}}{{/if}}"
                                />
                    </div>
                </td>
                <td class="w100px tar  red">Giá bán</td>
                <td>
                    <div class="pr10">
                        <input id="txtUnitsOnOrder" name="txtUnitsOnOrder" type="number"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["UnitsOnOrder"]|escape:'html'}}{{/if}}"
                                />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100pxtar tar red">Ngày bắt đầu</td>
                <td>
                    
                    <div class="pr10">
                        <input id="txtStartDate" name="txtStartDate" type="text"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["StartDate"]}}{{/if}}"
                                />
                    </div>
                </td>
                <td class="w100px tar  red">Ngày kết thúc</td>
                <td>
                    <div class="pr10">
                        <input id="txtEndDate" name="txtEndDate" type="text"  class="classic-input w100pc"
                                value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["EndDate"]}}{{/if}}"
                                />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100px tar vtat red"><label class="lh24 red">Tag</label></td>
                <td id="tdContent" colspan="3">
                    <div class="pr10">
                        <textarea id="txtTag" class="classic-input w100pc">{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["Tag"]}}{{/if}}</textarea>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <div class="w720px pt8 pl8 pb8">
            <div class="pb8">
                <div class="pl8 pt4 pb4 pr8 ovfh mt0 mb0 mr0 ml0 bdtccc bdlccc bdrccc gadiend-white">
                    Điều kiện mua hàng
                </div>
                <div class="pr10">
                    <textarea id="txtConditions" style="min-height: 100px" class="classic-input w100pc fl rsv">{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["HowToUser"]}}{{/if}}</textarea>
                    <div class="clear"></div>
                </div>
            </div>
            <div>
                <div class="pl8 pt4 pb4 pr8 ovfh mt0 mb0 mr0 ml0 bdtccc bdlccc bdrccc gadiend-white">
                    Đặc điểm nổi bật
                </div>
                <div class="pr10">
                    <textarea id="txtFeatures" style="min-height: 100px" class="classic-input w100pc fl rsv">{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["Feature"]}}{{/if}}</textarea>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="w720px pt8 pl8 pb8">
            <textarea id="txtContent" name="txtContent" class="w100pc"  style="height: 500px;">{{if isset($Data["OBJ"])}}{{$Data["OBJ"]["Content"]}}{{/if}}</textarea>
        </div>
    </div>
    <div>
        <div class="">
            <div class="pt8 pl8">
                <div id="AlbumItems">
                    {{if isset($Data["OBJ"])}}
                        {{$albums=json_decode($Data["OBJ"]["Album"])}}

                        {{for $foo=0 to count($albums)-1}}
                        <div class="AlbumItem grid_5 mb4 mt4 ml4 mr4 bdccc gadiend-white">
                            <div class="pt1 pb1 pl1 pr1">
                                <div class="pl8 pt4 pb4 pr8 ovfh mt0 mb0 mr0 ml0 bdbccc">
                                    Album item
                                </div>
                                <div class="pa r8 t4">
                                    <span class="hover50" style="cursor: pointer" onclick="DelAlbumItem(this)">✖</span>
                                </div>
                                <div class="pl4 pr4 pt4 pb4 mt0 mb0 ml0 mr0 ovfa pr" style="height: 220px">
                                    <img src="{{$albums[$foo]}}"/>
                                </div>
                            </div>
                        </div>
                        {{/for}}
                    {{/if}}
                </div>
                <div class="clear"></div>
            </div>
            <div class="w720px pt12 pl8">
                <div class="tac w100pc">
                    <span style="cursor: pointer" onclick="GenAlbumItemFromContent('#txtContent','#AlbumItems')"><tt>Tạo album hình từ nội dung sản phẩm.</tt></span>
                </div>
                <div class="clear"></div>
                <div class="grid_x pt12 pb12 mt12" style="border-top:1px dotted #ccc">
                    <div class="grid_3"><label class="lh24">Album item</label></div>
                    <div class="grid_10 pr32">
                        <div class="pr10 pr">
                            <input id="txtAddImage" class="classic-input w100pc"/>
                            <div class="pa hover50 icon16 chooseimage chooseimage_icon"
                                onclick="BrowseServer( 'txtAddImage' );"
                                title="Choose image from my host"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="grid_4">
                        <button class="classic-button" onclick="AddAlbumItem()"><span>Thêm</span></button>
                    </div>

                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<script>
    
    $(document).ready(function () {
        var theme=getTheme();
        $('#tab').jqxTabs({ width:'auto', theme: theme ,keyboardNavigation: false});
        $("#cbxCategorys").jqxDropDownList({ 
            checkboxes: true,
            source: {{json_encode($Data["Categorys"])}}, 
            width: '100%', 
            height: 22,
            theme: theme 
        });
        $("#cbxRegions").jqxDropDownList({ 
            checkboxes: true,
            source: {{json_encode($Data["Regions"])}}, 
            width: '100%', 
            height: 22,
            theme: theme 
        });
//        $("#jqxDateTime").jqxDateTimeInput({ 
//            width: 250, height: 22, theme: theme, 
//            formatString: 'yyyy-MM-dd',
//            selectionMode: 'range' 
//        });
        CreateDatetimeElement("#txtStartDate","#txtEndDate");
        addEditorContent("txtContent");
    });
</script>